
// Fonts
@import url("https://fonts.lug.ustc.edu.cn/icon?family=Material+Icons");
@import url("https://fonts.lug.ustc.edu.cn/css?family=Roboto:300,400,500,700,400italic");
@import url("../font/material-icons.css");
// Variables
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';
// toastr
@import "node_modules/toastr/toastr";

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
}

a {
  color: #444444;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:bottom;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* header */

.sticky-top {
  border-color: #e7e7e7;
  background-color: #fff;
  box-shadow: 0px 1px 11px 2px rgba(42, 42, 42, 0.1);
  border-top: 4px solid #00b5ad;
  margin-bottom: 40px;
  margin-top: 0px;
  .active {
    background: #dcebf5;
  }
  .nav > li > a {
    position: relative;
    display: block;
    //padding: 5px 14px;
  //  font-size: 0.9em;
    color: #444444;
  }
  .dropdown {
    padding: 5px;

  }
  .form-inline {
 //   margin-right: 60px;
  }
  z-index: 1501;
}


/* Sticky footer styles */
html {
  position: relative;
  min-height: 100% ;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100% ;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #000;

  .container {
    padding-right: 15px;
    padding-left: 15px;

    p {
      margin: 19px 0;
      color: #c1c1c1;

      a {
        color: inherit;
      }
    }
  }
}

/* User register page */
.register-page {
  img.captcha {
    margin-bottom: 0px;
    margin-top: 10px;
    cursor: pointer;
  }
}

/* Topic Index Page */
.topics-index-page, .categories-show-page {
  .topic-list {
    .nav > li > a {
      position: relative;
      display: block;
      padding: 5px 14px;
      font-size: 0.9em;
    }
    a {
      color: #444444;
    }
    .active {
      background: #00b5ad;
      a {
        color: white;
      }
    }
    .meta {
      font-size:0.9em;
      color: #b3b3b3;
      a {
        color: #b3b3b3;
      }
      line-height: 14px;
    }

    hr {
      margin-top: 10px;
      margin-bottom: 10px;
      border: 0;
      border-top: 1px solid #dcebf5;
    }
  }
}
/* User profile page */
.users-show-page {
  .user-info {
    .thumbnail {
      margin-bottom: 0px;
    }
  }

  .nav-tabs {
    margin-bottom: 20px;
    a {
      color: black;
    }

    >li.active > a {
      background-color: #fff;
    }
  }

  .list-group {
    .list-group-item {
      border: none;
      margin-bottom: 0px;
      border-bottom: 1px solid #efefef;

      .meta {
        color: #b3b3b3;
      }
    }
  }

  .pagination {
    margin: 12px 0;
  }
}

.topic-reply {

    margin-top: 16px;
    margin-bottom: 16px;


  a {
    color: inherit;
  }

  .meta {
    font-size: .9em;
    color: #b3b3b3;
  }
}

.toast-top-right-custom {
  top: 66px;
  right: 12px;
}

.active-users {
  margin-top: 20px;
}


.page-item.active .page-link {
  background-color: #00b5ad;
  border-color: #00b5ad;
}

.page-link {
  color: initial;
}

.follow-info {
  text-align: center;
  a {
    display: block;
    white-space:nowrap;
  }
  .counter {
    color:red;
  }
  .text {

  }
}

.breadcrumb {
  background-color: white;
}
$box-color:#fff;
.v-note-wrapper .v-note-panel {
  box-shadow: 0 0 0 $box-color!important;
}

.article-meta {
  color: #8c8c8c;
}